<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>修改</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    
    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath }/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=C75HGmvnjDq1Fer37Mrkw24YfBKyQKI9"></script>
    
	<style>
		input,select{
			 width:168px;
			 height:25px;
			 border:1px solid #ccc;
			 margin-left:24px;
		}
		
		.form-item{
			display:flex;
		}
		.label-text{
		   height: 34px;
		   line-height: 34px;
		   font-weight: normal;
		}
		.addInput{ 
			background-color: #ffffff;
		    background-image: none;
		    border: 1px solid #e5e6e7;
		    border-radius: 1px;
		    color: inherit;
		    display: block;
		    font-size: 14px;
		    padding: 6px 12px;
		    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
		    height: 34px;
		   line-height: 34px;
		   flex: 1;
		}
		.saveBtn{
			 display: block;
		    margin: 15px auto;
		    width: 120px;
		}
		
	input[type="radio"] + label::before {
	    content: "\a0"; /*不换行空格*/
	    display: inline-block;
	    vertical-align: middle;
	    font-size: 18px;
	    width: 1em;
	    height: 1em;
	    margin-right: .4em;
	    border-radius: 50%;
	    border: 1px solid #01cd78;
	    text-indent: .15em;
	    line-height: 1; 
	}

	input[type="radio"]:checked + label::before {
	    background-color: #01cd78;
	    background-clip: content-box;
	    padding: .2em;
	}	
	input[type="radio"] {
	    position: absolute;
	    clip: rect(0, 0, 0, 0);
	}	

	#allmap {
		height: 500px;
		width: 100%;
	}
	
	#r-result {
		width: 100%;
		font-size: 14px;
	}
	</style>	
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-content">
                        <div class="form-inline">
							<form name = "form1" id = "update_arBuilding"  enctype='multipart/form-data'>
									<input type = "hidden" class = "addInput" name = "id" value = "${arBuilding.id }">
								<div class="form-item">
									<label class="label-text">名称：</label>
									<input type = "text" class = "addInput" name = "name" value = "${arBuilding.name }"><br/><br/>
								</div>
								<div class="form-item">
									<label class="label-text">简介：</label>
									<input type = "text" class = "addInput" name = "info" value = "${arBuilding.info }"><br/><br/>
								</div>
								<div class="form-item">
									<label class="label-text">可识别距离：</label>
									<input type = "text" class = "addInput" name = "scanDistance" value = "${arBuilding.scanDistance }" maxlength="5" ><br/><br/>
								</div>
								<div class="form-item">
									<label class="label-text">地址：</label>
									<input type = "text" class = "addInput" name = "address" value = "${arBuilding.address }"><br/><br/>
								</div>
								<div>
									<label  class="label-text" style='float:left'>格式：</label>
										<input id = "wenzi1" name="type" type="radio" value="0" <c:if test="${arBuilding.type == 0 }">checked="checked"</c:if>/>
											<label for = "wenzi1">文字横版</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input id = "wenzi2" name="type" type="radio" value="2" <c:if test="${arBuilding.type == 2 }">checked="checked"</c:if>/>
											<label for = "wenzi2">文字竖版</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input id = "shipin" name="type" type="radio" value="1" <c:if test="${arBuilding.type == 1 }">checked="checked"</c:if>/>
											<label for = "shipin">视频</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input id = "more" name="type" type="radio" value="3" <c:if test="${arBuilding.type == 3 }">checked="checked"</c:if>/>
											<label for = "more">不限栏目</label>
								</div>
								<div class="form-item">
									<label class="label-text">电话：</label>
									<input type = "text" class = "addInput" name = "telphone" value = "${arBuilding.telphone }"><br/><br/>
								</div>	
								<div class="form-item" style='width:100%;display:table;'>
									<label  class="label-text" style='float:left'>图片：</label>
									<div style='width:80%;displat:table;float:left'>
										<img alt="" src="${arBuilding.imageUrl }" style='height:150px;margin-left:24px'>
									</div>
									<div style='width:calc(100% - 54px);display:block;margin:10px 0 10px 54px;'>
										<input type='file' name='imageUrls' onchange="imageChange(this);" accept=".png,.jpg,.jpeg" >
									 	&nbsp;&nbsp;不能超过2M
									</div>
									
								</div>	
								<div class="form-item">
									<label  class="label-text">视频：</label>
									<input type='file' name='videoUrls' onchange="videoChange(this);" accept='.mp4'>
									&nbsp;&nbsp;只支持.mp4格式
								</div>	
								<div id="allmap"></div>
								<div class="form-item">
									<label  class="label-text">地址:</label>
									 <input id="cityName" type="text"style="width: 100px; margin-right: 10px;" /> 
									<input type="button" value="查询" onclick="theLocation()" /><br/><br/>   
								</div>
								<div class="form-item">
									<label class="label-text">经度：</label>
									<input type = "text" class = "addInput" id = "lat" name = "lat" value = "${arBuilding.lat }"><br/><br/>
								</div>	
								<div class="form-item">
									<label class="label-text">纬度：</label>
									<input type = "text" class = "addInput" id = "lng" name = "lng" value = "${arBuilding.lng }"><br/><br/>
								</div>	
								<button type = "submit" class="btn btn-primary">确定</button>
						    </form>
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

    
    <script type="text/javascript">

	// 百度地图API功能
	var lat = $("#lat").val();
	var lng = $("#lng").val();
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(lng,lat);
	map.centerAndZoom(point, 18);
	map.addEventListener("click", function(e) {
		var input = document.getElementById('lng');
		var input2 = document.getElementById('lat');
		input.value = e.point.lng;
		input2.value = e.point.lat;
	});
	map.enableScrollWheelZoom(true);

	map.addControl(new BMap.NavigationControl());


	var myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint("石家庄健康路33号", function(point){
		if (point) {
			map.centerAndZoom(point, 16);
			map.addOverlay(new BMap.Marker(point));
		}else{
			alert("您选择地址没有解析到结果!");
		}
	}, "北京市");

	
	
	var local = new BMap.LocalSearch(map, {
		renderOptions : {
			map : map
		}
	});
	function theLocation() {
		var city = document.getElementById("cityName").value;
		if (city != "") {
			local.search(city);
		}
	}
    
 	// 手机号码验证  
    jQuery.validator.addMethod("isMobile", function(value,element) {
        var length = value.length;
        var mobile =  /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        var tel = /^\d{3,4}-?\d{7,9}$/;
        if(/-/.test(value)){
            return this.optional(element) || tel.test(value);
        }else{
            return this.optional(element) || (length == 11 && mobile.test(value));
        }
    }, "请正确填写您的联系电话");
 
    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#update_arBuilding").validate({
            rules: {
            	name: {//姓名
                    required: true,
    				maxlength: 20
                },
                address: {//地址
                    required: true,
    				maxlength: 100
                },
                latlngList:{
                	maxlength: 5
                },
                telphone: {//登录帐号
                    required: true,
                    isMobile:true,
    				minlength: 11
                },
                lat: {//纬度
                    required: true,
    				maxlength: 100
                },
                lng: {//经度
                    required: true,
    				maxlength: 100
                },
                info: {//简介
    				maxlength: 200
                }
            },
            messages: {
            	name:{
            		required:icon + "请填写名称",
            		maxlength:icon + "最大长度为20"
            	},
            	address: {
            		required:icon + "请输入地址",
            		maxlength:icon + "最大长度为100"
            		},
                telphone:{
            		required:icon + "请填写电话",
            		isMobile:icon + "请输入正确格式",
            		minlength:icon + "请输入11位"
            		},
                lat:{
            		required:icon + "请填写经度",
            		maxlength:icon + "最大长度为100"
            		},
                lng:{
            		required:icon + "请填写纬度",
            		maxlength:icon + "最大长度为100"
            		},
                info:{
            		maxlength:icon + "最大长度为200"
            	}
                
            },
    		submitHandler: function(form) {
    			updateArNavigation();
    		}
        });
    });
 	function cancel(){
 		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
 	}
	 function ValidateValue(textbox)
     {
          var IllegalString = "\`~@#;,.!#$%^&*()+{}|\\:\"<>?-=/,\' []";
          var textboxvalue = textbox.value;
          var index = textboxvalue.length - 1;
          
          var s = textbox.value.charAt(index);
          
          if(IllegalString.indexOf(s)>=0)
          {
             s = textboxvalue.substring(0,index);
             textbox.value = s;
          }
     }


    //上传图片
    function imageChange(target) {
        var fileSize = 0;
        fileSize = target.files[0].size;
        var size = fileSize / 1024;
        if(size > 2000){
           alert("图片不能大于2M");
           target.value="";
           return false;   //阻止submit提交
        }
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="jpg" && fileName !="jpeg" && fileName !="png"){
           alert("请选择图片格式文件上传(jpg,jpeg,png)！");
           target.value="";
           return false;   //阻止submit提交
        }
	}
    //上传视频
    function videoChange(target) {
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="mp4"){
           alert("请选择图片格式文件上传(.mp4格式)！");
           target.value="";
           return false;   //阻止submit提交
        }
	}
      
	//添加或修改
	function updateArNavigation(){	
		var formData = new FormData($( "#update_arBuilding" )[0]);  
		$.ajax({
			processData: false,
			contentType: false,
    		url:"${pageContext.request.contextPath }/admin/arBuilding/update",
    		data:formData,
    		type:"post",
    		success:function(data){
    			if(data.code == 0){
					layer.msg(data.message,{icon:1});
					setTimeout('cancel()',1000);
    			}else {
					layer.msg(data.message,{icon:0});
    			}
    		}
    	});
	}
	
	</script>
</html>
